<template>
  <div class="user">
    <UserSearch
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></UserSearch>
    <UserContent
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    ></UserContent>
    <UserModal ref="modalRef"></UserModal>
  </div>
</template>

<script setup lang="ts">
import UserSearch from "./UserSearch/UserSearch.vue";
import UserContent from "./UserContent/UserContent.vue";
import UserModal from "./UserContent/UserModal.vue";
import { ref } from "vue";

// 对content组件的操作
const contentRef = ref<InstanceType<typeof UserContent>>();
function handleQueryClick(formData: any) {
  contentRef.value?.fetchUserListData(formData);
}
function handleResetClick() {
  contentRef.value?.fetchUserListData();
}

// 对modal组件的操作
const modalRef = ref<InstanceType<typeof UserModal>>();
function handleNewClick() {
  modalRef.value?.setModalVisible();
}

function handleEditClick(itemData: any) {
  console.log(itemData);
  modalRef.value?.setModalVisible(false, itemData);
}
</script>
<style lang="less" scoped>
.user {
  border-radius: 8px;
  overflow: hidden;
}
</style>
